<template>
  <div>
    <p></p>

    <el-form
      :model="entity"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="dialog-form"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item
            v-if="!entity.overtimeId"
            label="部门"
            prop="departmentId"
          >
            <department-select disabled
              v-model="entity.departmentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="!entity.overtimeId"
            label="员工"
            prop="employeeId"
          >
            <employee-select
              v-model="entity.employeeId"
              :departmentId="entity.departmentId"
              :clearable="true"
            ></employee-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item style="width: 100%" label="员工" prop="name">
            <el-button disabled
              style="width: 100%; color: red"
              type="primary"
              plain
              @click="findEmployee"
            >
              {{ (entity.employee || { name: "-" }).name }}</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="状态" prop="status">
            <el-select style="width: 100%" v-model="entity.status" disabled>
              <el-option
                :key="10"
                :value="10"
                :label="'10--草稿'"
              ></el-option>
              <el-option
                :key="20"
                :value="20"
                :label="'20--审核中'"
              ></el-option>
              <el-option
                :key="30"
                :value="30"
                :label="'30--审核不过'"
              ></el-option>
              <el-option
                :key="40"
                :value="40"
                :label="'40--审核不过终止'"
              ></el-option>
              <el-option
                :key="50"
                :value="50"
                :label="'50--审核通过'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="日期" prop="workday"
            ><el-date-picker disabled
              style="width: 100%"
              v-model="entity.workday"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
            <el-form-item style='width:100%' label='星期' prop='week'>
                <el-input disabled placeholder='星期' v-model='entity.week'>
                </el-input>
            </el-form-item>
		</el-col>
      </el-row>





		<el-col :span='12'>
		<el-form-item style='width:100%' label='段落' prop='segment'>
			<el-input  :disabled='disabled'  placeholder='段落' v-model='entity.segment'>
			</el-input>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='加班类型' prop='overtimeType'>
			<el-select style='width:100%' v-model='entity.overtimeType'  :disabled='disabled' >
				<el-option :key='20' :value='20' :label='"20--自动算"' ></el-option >
				<el-option :key='21' :value='21' :label='"21--平时加班"' ></el-option >
				<el-option :key='22' :value='22' :label='"22--周末加班"' ></el-option >
				<el-option :key='23' :value='23' :label='"23--节假日加班"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='上班卡' prop='sStart'>
			<el-input  :disabled='disabled'  placeholder='上班卡' v-model='entity.sStart'>
			</el-input>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='下班卡' prop='sEnd'>
			<el-input  :disabled='disabled'  placeholder='下班卡' v-model='entity.sEnd'>
			</el-input>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='上班免卡' prop='sStartNo'>
			<el-select style='width:100%' v-model='entity.sStartNo'  :disabled='disabled' >
				<el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
				<el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='下班免卡' prop='sEndNo'>
			<el-select style='width:100%' v-model='entity.sEndNo'  :disabled='disabled' >
				<el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
				<el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='标准工时' prop='hStandard'>
			<el-input  :disabled='disabled'  placeholder='标准工时' v-model='entity.hStandard'>
			</el-input>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='扣除工时' prop='hMinus'>
			<el-input  :disabled='disabled'  placeholder='扣除工时' v-model='entity.hMinus'>
			</el-input>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='是否跨天' prop='overDay'>
			<el-select style='width:100%' v-model='entity.overDay'  :disabled='disabled' >
				<el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
				<el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='排班标识' prop='classFlag'>
			<el-select style='width:100%' v-model='entity.classFlag'  :disabled='disabled' >
				<el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
				<el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='打卡系统' prop='cardSystem'>
			<el-select style='width:100%' v-model='entity.cardSystem'  disabled>
				<el-option :key='10' :value='10' :label='"10--本系统"' ></el-option >
				<el-option :key='20' :value='20' :label='"20--钉钉倒入"' ></el-option >
				<el-option :key='30' :value='30' :label='"30--企业微信"' ></el-option >
				<el-option :key='40' :value='40' :label='"40--打卡数据同步"' ></el-option >
			</el-select>
		</el-form-item>
		</el-col>
		<el-col :span='12'>
		<el-form-item style='width:100%' label='创建时间' prop='createdAt'>
			<el-input disabled placeholder='创建时间' v-model='entity.createdAt'>
			</el-input>
		</el-form-item>
		</el-col>
	</el-row>
</el-form>
    <v-dialog ref="formDiag" :appendToBody="true" title="查找" :width="'48%'">
      <employee-multi-select
        v-model="entity.employeeId"
        :confirmFind="confirmFind"
        :cancelFind="cancelFind"
      >
        <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
        <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
      </employee-multi-select>
    </v-dialog>
  </div>
</template>
<style lang="less" scoped>
.merchantLogo .el-upload-dragger {
  img {
    height: 200px !important;
  }
}

.dialog-form {
  .el-radio-group {
    .el-radio {
      display: flex;
      align-items: center;
    }

    label {
      height: 40px;
    }
    .group-text {
      display: inline-block;
      width: 100px;
    }
    .title-text {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>

<script>


	const defaultEntity = {
		overtimeId:  null,	//  加班标识
		applyId: 0,	//  申请标识
		departmentId: 0,	//  部门
		employeeId: 0,	//  员工
		status: 50,	//  状态
		workday:  '2000-01-01 00:00:00' ,	//  日期
		week:  '-' ,	//  星期
		segment: 1,	//  段落
		overtimeType: 21,	//  加班类型
		sStart:  '08:00' ,	//  上班卡
		sEnd:  '12:00' ,	//  下班卡
		sStartNo:  false,	//  上班免卡
		sEndNo:  false,	//  下班免卡
		hStandard: 0,	//  标准工时
		hMinus: 0,	//  扣除工时
		overDay:  false,	//  是否跨天
		classFlag:  false,	//  排班标识
		cardSystem: 10,	//  打卡系统
		createdAt:  null,	//  创建时间
	};
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

export default {
  components: { EmployeeMultiSelect, DepartmentSelect, EmployeeSelect },
  data() {
    return {
      disabled: true,
      parentId: 0,
      ruleTpl: { when: null, then: null },
      entity: _.cloneDeep(defaultEntity),
      dateRange: [],
      oldProps: [],
      ruleDefs: [],
      isDisabled: false,
      limitTotal: false,
      rules: {
        custNo: [
          { required: true, message: "编号不能为空", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1 到 6 个字符",
            trigger: "blur",
          },
        ],
        custName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字符",
            trigger: "blur",
          },
        ],
        startOn: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        merchantId: [
          {
            type: "number",
          },
        ],
        status: [
          {
            type: "number",
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        discountType: [
          {
            type: "number",
            required: true,
            message: "请选择优惠类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    findEmployee() {
      //this.classNumber = classNumber;
      this.$refs.formDiag.show();
    },

    confirmFind(row) {
      this.$refs.formDiag.hide();
      this.entity.employeeId = row.id;
      this.$api.hr.EmployeeService.findById(this.entity.employeeId).then(
        (rsp) => {
          if (rsp.data != null) {
            this.entity.employee = rsp.data;
          }
        }
      );
    },
    cancelFind() {
      this.$refs.formDiag.hide();
    },

    getProps(scope) {
      return this.entity.props.filter((p) => p.propScope == scope);
    },
    onRuleDefsLoaded(opts) {
      this.ruleDefs = opts || [];
      this.resetProps();
    },
    onDiscountTypeChange(val) {
      if (val == 3) {
        //次数只能一次
        this.entity.discountValue = 1;
      }
    },
    resetProps() {},
    setValues(vals) {
      this.resetEntity = _.cloneDeep(vals);
      this.entity = _.cloneDeep(this.resetEntity);
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.entity);

          this.$api.attend.attend.EmployeeOvertimeService.save(params).then((rsp) => {
            this.$msgJsonResult(rsp);

            if (rsp.code === 200) {
              this.$emit("saved", rsp);
            }
          });
        }
      });
    },
    resetForm() {
      //this.$refs["form"].resetFields();
      this.entity = _.cloneDeep(defaultEntity);
      if (!this.entity.overtimeId) {
        this.entity.workday = this.$dongxwDict.formatDateZero(new Date());
        this.entity.createdAt = this.$dongxwDict.formatDatetime(new Date());
      }
    },
    init(options) {
      this.resetForm();
      if (options.overtimeId) {
        this.$api.attend.attend.EmployeeOvertimeService.findById(
          options.overtimeId
        ).then((r) => {
          this.entity = r.data;
          if (!this.entity.employee) {
            this.entity.employee = { name: "-" };
          }
        });
      } else {
        if (options.departmentId) {
          this.entity.departmentId = options.departmentId;
        }
        this.isDisabled = false;
      }
    },
    search() {},
  },
  mounted() {
    this.$on("init", this.init);
    this.$on("submit", this.submitForm);
  },
};
</script>
